<template>
  <div>
    <div style="border: 1px solid gray;margin: 8px;border-radius: 5px;">
      <div style="padding-left: 12px;height: 50px;line-height: 50px;font-size: 18px;">商品详情:<font style="margin-left: 10px;">{{ order_desc }}</font></div>
      <div style="padding-left: 12px;height: 50px;line-height: 50px;margin-bottom: 12px;font-size: 18px;">订单金额:<font style="margin-left: 10px;">￥{{ total_fee }}</font></div>
    </div>
    <a-button type="primary" @click="unifiedOrder" size="large" block :disabled="payDisable">{{ isPay }}</a-button>
    <a-modal
      v-model="visible"
      :title="title"
      ok-text="确认"
      @ok="payCancel"
      @cancel="payCancel"
    >
      <p>{{ content }}</p>
    </a-modal>
  </div>
</template>
<script>
import { getOpenid } from '@/api/user'
import { wxpayUnifiedOrderJsapi } from '@/api/channelCode'
export default {
  data () {
    return {
      isPay: '支付',
      payDisable: false,
      title: '',
      content: '',
      visible: false,
      code: '',
      openid: '',
      appid: 'wx58826fc06869d4bf',
      secret: '6616df7d0aa1308d43494923ee9d4f54',
      grant_type: 'authorization_code',
      order_desc: this.$route.query.order_desc,
      total_fee: this.$route.query.total_fee,
      contact_id: this.$route.query.contact_id,
      channel_code_id: this.$route.query.channel_code_id,
      tenantId: this.$route.query.tenantId,
      outTradeNo: ''
    }
  },
  created () {
    this.getOpenid()
  },
  methods: {
    payCancel () {
      this.visible = false
      if (this.title == '支付成功') { this.payDisable = true; this.isPay = '已支付' }
    },
    // 统一下单后，如果返回成功，再调用微信jsapi支付请求
    unifiedOrder () {
      wxpayUnifiedOrderJsapi({
        order_desc: this.order_desc,
        total_fee: this.total_fee,
        contact_id: this.contact_id,
        channel_code_id: this.channel_code_id,
        openid: this.openid,
        tenantId: this.tenantId
      }).then(res => {
        this.outTradeNo = res.outTradeNo
        this.handleGetDataSucc(res)
      })
    },
    getOpenid () {
      const param = {
        appid: this.appid,
        secret: this.secret,
        grant_type: this.grant_type,
        code: this.$route.query.code
      }
      getOpenid(param).then(res => {
        this.openid = res.openid
      })
    },
    handleGetDataSucc (res) {
    // 下面是解决WeixinJSBridge is not defined 报错的方法
      if (typeof WeixinJSBridge === 'undefined') { // 微信浏览器内置对象。参考微信官方文档
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(res), false)
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(res))
          document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(res))
        }
      } else {
        console.info('准备调用微信支付')
        this.onBridgeReady(res)
      }
    },
    onBridgeReady (res) {
      console.info('调用微信支付WeixinJSBridge')
      console.info(res)
      window.WeixinJSBridge.invoke(
        'getBrandWCPayRequest', { // 下面参数内容都是后台返回的
          'appId': res.appid, // 公众号名称，由商户传入
          'timeStamp': res.timeStamp, // 时间戳
          'nonceStr': res.nonce_str, // 随机串
          'package': res.package, // 预支付id
          'signType': res.signType, // 微信签名方式
          'paySign': res.sign // 微信签名
        },
        // function (resp) {
        (resp) => {
        // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          if (resp.err_msg === 'get_brand_wcpay_request:ok') {
            // Dialog.alert({
            //   message: '下单成功'
            // }).then(() => { vm.$router.push('/order') })
            this.visible = true
            this.title = '支付成功'
            this.content = '支付成功'
          } else {
            // Dialog.alert({
            //   message: '下单失败'
            // }).then(() => { vm.$router.push('/order') })
            this.visible = true
            this.title = '支付失败'
            this.content = '支付失败'
          }
        }
      )
    }
  }
}
</script>
<style>
  page{background-color: red;}
</style>
